@cutting-size: 2px;

.cover-page-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(to right, @theme-color 50%, @theme-color 50%, #fff 50%, #fff 100%);

    .content-box {
        width: 60%;
        padding: 40px;
        background-color: #fff;
        box-shadow: 5px 10px 20px rgba(@theme-color, 50%);
    }

    .title {
        text-align: center;
        font-size: 50px;
        font-weight: bold;
    }

    .cutting-line {
        position: relative;
        width: 90%;
        height: @cutting-size;
        margin: 20 * @cutting-size auto;

        .line {
            position: relative;
            display: block;
            height: @cutting-size;
            overflow: hidden;

            &::before,
            &::after {
                position: absolute;
                display: block;
                content: "";
                top: 0;
                bottom: 20px;
                width: 100%;
                height: 100%;
                background-color: @theme-color;
            }

            &::before {
                right: 50%;
                transform: translateX(-20 * @cutting-size);
            }
            &::after {
                left: 50%;
                transform: translateX(20 * @cutting-size);
            }
        }

        .cross {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10 * @cutting-size;
            height: 10 * @cutting-size;
            transform: translate(-50%, -50%);

            &::before,
            &::after {
                position: absolute;
                display: block;
                content: "";
                top: 50%;
                left: 0;
                width: 100%;
                height: @cutting-size;
                background-color: @theme-color;
            }

            &::before {
                transform: translateY(-50%) rotate(45deg);
            }
            &::after {
                transform: translateY(-50%) rotate(-45deg);
            }
        }
    }

    .info {
        display: flex;
        justify-content: center;
    }

    .info-item:not(:last-child) {
        margin-right: 40px;
    }
}
